/*eslint-disable*/
import React, { useState, useEffect } from 'react'
import { Table, Space, Button, Cascader, Modal, Input, message} from 'antd';
import request from '../../../utils/request'
const broker = () => {
    const options1 = [
        {
            value: '开启',
            label: '开启',
        },
        {
            value: '关闭',
            label: '关闭',
        }
    ];

    function onChange(value) {
        console.log(value);
    }

    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '公司',
            dataIndex: 'gong',
            key: 'gong',
        },
        {
            title: '新房',
            dataIndex: 'xin',
            key: 'xin',
        },
        {
            title: '二手房',
            dataIndex: 'ershou',
            key: 'ershou',
        },
        {
            title: '租房',
            dataIndex: 'zu',
            key: 'zu',
        },
        {
            title: '状态',
            dataIndex: 'zhuang',
            key: 'zhuang',
        },
        {
            title: '操作',
            key: 'action',
            render: (record) => (
                <Space size="middle">
                    <a onClick={() => edit(record)}>编辑</a>
                    <a onClick={() => remove(record.id)}>删除</a>
                    <a>启用</a>
                    <a>禁用</a>
                </Space>
            ),
        },
    ];

    const [list, setlist] = useState([])
    //弹框开关
    const [isModalVisible, setIsModalVisible] = useState(false);

    //自定义开关
    const [flag, setFlag] = useState(false)
    //输入绑定的内容
    const [name, setName] = useState("")//标题自定义数据
    const [phone, setPhone] = useState("")//创建人自定义数据
    const [gong, setGong] = useState("")//标题自定义数据
    const [xin, setXin] = useState("")//创建人自定义数据
    const [ershou, setErshou] = useState("")//创建人自定义数据
    const [zu, setZu] = useState("")//标题自定义数据
    const [zhuang, setZhuang] = useState("")//创建人自定义数据
    // const [data, setData] = useState("")//时间自定义数据


    //搜索绑定的内容
    const [val, setval] = useState("")
    const [one, setone] = useState("")
    const [id, setid] = useState(null)


    //添加弹框
    const addModal = () => {
        setFlag(false)
        setIsModalVisible(true);
    };
    //取消键
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //编辑弹框
    const edit = (id) => {
        setFlag(true)
        setIsModalVisible(true)
        setid(id)
        //数据回显
    }

    useEffect(() => {
        tablelist()
    }, [])

    const tablelist = async () => {
        const res = await request.get('/api/list7')
        setlist([...res.data.data])
    }

    //删除
    const remove = async (id) => {
        await request({
            url: "/api/list7del",
            method: "delete",
            params: { id: id }
        })
        tablelist()
        message.success("操作成功")
    }
    //添加数据或修改数据
    const handleOk = async () => {
        setIsModalVisible(false);
        if (flag) {
            const res = await request({
                url: "/api/list7edit",
                method: "post",
                data: {
                    name,
                    phone,
                    gong,
                    xin,
                    ershou,
                    zu,
                    zhuang,
                    id
                }
            })
            console.log(res);
            tablelist()
            message.success("操作成功")
        } else {
            const res = await request({
                url: "/api/list7add",
                method: "post",
                data: {
                    name,
                    phone,
                    gong,
                    xin,
                    ershou,
                    zu,
                    zhuang
                }
            })
            tablelist()
            console.log(res);
            message.success('操作成功');

        }
    };
    //搜索
    const onSearch = (value) => {
        console.log(value)
        request.post('/api/list7search', { value: value }).then(res => {
            console.log(res);
            tablelist()
        })
    };
    return (
        <div>
            <header>
                经纪人管理
            </header>
            <div className="div-btn">
                <div className="inp">搜索<span><input placeholder="请输入经纪人姓名/手机号" onChange={onSearch} /></span></div>
                <div>状态<span><Cascader options={options1} onChange={onChange} placeholder="请选择" /></span></div>
                <div><Button>查询</Button><Button type="primary" onClick={()=>addModal()}>新建</Button></div>
            </div>
]]]]]]]]]]]] c                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
            <div>
                <Table columns={columns} dataSource={list} />
            </div>

            <div>
                <Modal title={flag === false ? "添加" : "编辑"} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} className='addBox'>
                    <p><span>姓名</span><Input value={name} placeholder="姓名" onChange={(e) => setName(e.target.value)} /></p>
                    <p><span>手机号</span><Input value={phone} placeholder="手机号" onChange={(e) => setPhone(e.target.value)} /></p>
                    <p><span>公司</span><Input value={gong} placeholder="公司" onChange={(e) => setGong(e.target.value)} /></p>
                    <p><span>新房</span><Input value={xin} placeholder="新房" onChange={(e) => setXin(e.target.value)} /></p>
                    <p><span>二手房</span><Input value={ershou} placeholder="二手房" onChange={(e) => setErshou(e.target.value)} /></p>
                    <p><span>租房</span><Input value={zu} placeholder="租房" onChange={(e) => setZu(e.target.value)} /></p>
                    <p><span>状态</span><Input value={zhuang} placeholder="状态" onChange={(e) => setZhuang(e.target.value)} /></p>
                </Modal>
            </div>
        </div>
    )
}
export default broker
